@import '~@c/globalcss/color.scss';
.settBox{
  width: 400px;
  padding: 20px 0;
  li{
    text-align: center;
    line-height: 1.5;
    hr{
      margin: 20px auto;
    }
    em{
      background-color: #fff
    }
  }
  li.settLink{
    color:#fff;
    font-weight: bold;
  }
}

.glitch{
  position:relative;
  width: 110px;
  height: 110px;
  background-color: #fff;
  border-radius: 50%;
  margin: 12px auto 24px auto;;
  img{
    position: absolute;
    z-index: 3;
    top: 54%;
    left: 50%;
    transform: translate(-50%,-50%);
  }
}

@keyframes noise-anim{
  @for $i from 1 through 20{
     #{$i*5%}{clip:rect(random(100)+px,9999px,random(100)+px,0);}
  }
}
.glitch:after{
  content:url('http://cdn.toofook.com/my-blog/glitch-2.png');
  position:absolute;
  left: calc(50% - 2px);
  top: 56%;
  transform: translate(-50%,-50%);
  overflow:hidden;
  z-index: 4;
  clip:rect(0,900px,0,0); 
  animation:noise-anim 2s infinite linear alternate-reverse;
}



@keyframes noise-anim-2{
  @for $i from 1 through 20{
     #{$i*5%}{clip:rect(random(100)+px,9999px,random(100)+px,0);}
  }
}
.glitch:before{
  content:url('http://cdn.toofook.com/my-blog/glitch-3.png');
  position:absolute;
  left: calc(50% + 2px);
  top: 60%;
  transform: translate(-50%,-50%);
  overflow:hidden;
  z-index: 4;
  clip:rect(0,900px,0,0); 
  animation:noise-anim-2 3s infinite linear alternate-reverse;
}


@media screen and (max-width: 480px) {
  ul.settBox{
      width:96vw;
  }
}